import { PureComponent } from "react";
import "./style.scss";
import Loading from "../../../components/Loading";
interface Props {
  type: number;
}
interface State {}

//避免父组件在滚动时,一直在执行setState,一直重新渲染,子组件也一直渲染  -->继承PureComponent
class Index extends PureComponent<Props, State> {
  state = {
    num: 10,
    list: [],
    total: 0,
    pagenum: 1,
    pagesize: 10,
  };

  //监控props属性变化
  UNSAFE_componentWillReceiveProps(
    nextProps: Readonly<Props>,
    nextContext: any
  ): void {
    //父组件在滚动时,一直在执行setState,一直重新渲染,子组件就会一直调用该函数,所以进行判断
    if (nextProps.type !== this.props.type) {
      this.setState(
        {
          list: [],
          pagenum: 1,
          pagesize: 10,
          total: 0,
        },
        () => {
          this.onTableData(nextProps.type);
        }
      );
    }
  }

  onTableData = async (type: number) => {
    const { pagenum, pagesize } = this.state;
    const {
      data: { list, total },
    } = await fetch(
      `fsdy/fsdy/film/index?pagenum=${pagenum}&pagesize=${pagesize}&type=${type}`
    )
      .then((res) => res.json())
      .catch((err) => console.log("错误---", err));
    this.setState({
      list: [...this.state.list, ...list],
      total,
    });
  };

  private getFilm = () => {
    // let arr = [];
    // for (let i = 0; i < this.state.num; i++) {
    //   arr.push(
    //     <div className="item" key={i}>
    //       <img
    //         src="https://pic.maizuo.com/usr/movie/7893225a582766f36c3bc72890606b41.jpg"
    //         alt=""
    //       />
    //       <div className="desc">
    //         <div className="title">
    //           哑铃之旅 <div>2D</div>
    //         </div>
    //         <div className="code">
    //           观众评分 <span>7.6</span>
    //         </div>
    //         <div className="persons">主演: 新海城 原材奶花 周蓝蓝 松花江上</div>
    //         <div>日本 | 122分钟</div>
    //         <div className="address">南京市雨花台区英台大街619号</div>
    //       </div>
    //       <div className="buy">购买</div>
    //     </div>
    //   );
    // }
    // return arr;
    return this.state.list.map((item: any, i) => {
      return (
        <div className="item" key={i}>
          <img src={item.poster} alt="" />
          <div className="desc">
            <div className="title">
              {item.name} <div>{item.filmType}</div>
            </div>
            <div className="code">
              观众评分 <span>{item.grade}</span>
            </div>
            <div className="persons">
              主演:{" "}
              {JSON.parse(item.actors)
                .map((item: any) => item.name)
                .join(" ")}
            </div>
            <div>
              {item.nation} | {item.runtime}分钟
            </div>
            <div className="address">{item.address}</div>
          </div>
          <div className="buy">购买</div>
        </div>
      );
    });
  };

  componentDidMount(): void {
    //获取数据
    this.onTableData(this.props.type);
    //页面绑定监听事件
    document.addEventListener("scroll", () => {
      //获取html页面视口高度
      const clientHeight = document.documentElement.clientHeight;
      //获取html页面内容高度
      const scrollHeight = document.documentElement.scrollHeight;
      //获取滚动高度
      const scrollTop = document.documentElement.scrollTop;
      //触底
      if (clientHeight + scrollTop >= scrollHeight) {
        // setTimeout(() => {
        //   this.setState({
        //     num: this.state.num + 10,
        //   });
        // }, 2000);
        if (this.state.total && this.state.list.length >= this.state.total) {
          return;
        }
        console.log("触底了");
        this.setState(
          {
            pagenum: this.state.pagenum + 1,
          },
          () => {
            this.onTableData(this.props.type);
          }
        );
      }
    });
  }

  render() {
    console.log("render-film");

    return (
      <div className="film">
        {this.getFilm()}
        {this.state.list.length >= this.state.total && this.state.total ? (
          <div style={{ width: "100%", textAlign: "center" }}>-到底啦-</div>
        ) : (
          <Loading></Loading>
        )}
      </div>
    );
  }
}
export default Index;
